import React, { useEffect, useState } from "react";
import http from "./api/http";
import { NavBar, Space, Toast, Tabs, List, Popup,CalendarPickerView  } from "antd-mobile";
import dayjs from "dayjs";
import "./App.css";
// import {useNavigate} from  "react-router-dom"
function App() {
  const [date, setDate] = useState(dayjs().format("YYYY-MM-DD"));
  const [start, setStart] = useState("北京");
  const [end, setEnd] = useState("广州");
  const [isSpeed, setIsSpeed] = useState(false);
  const [isSeat, setIsSeat] = useState(false);
  const [isDesc, setIsDesc] = useState(false);
  const [page, setpage] = useState(1);
  const [TickList, setTickList] = useState([]);
  const [visible1, setVisible1] = useState(false);
  const getTickList = async () => {
    const res = await http.post("/api/trip/train", {
      start,
      end,
      date,
      page,
      isDesc,
      isSeat,
      isSpeed,
    });
    const { code, data } = res.data;
    console.log(data);
    if (code === 200) {
      setTickList([...data, ...TickList]);
    }
  };
  useEffect(() => {
    getTickList();
  }, []);
  return (
    <div>
      <NavBar>上海--北京</NavBar>
      <div className="timer">
        <span onClick={()=>setVisible1(true)}>{date}</span>
      </div>
      <div>
        <Tabs>
          <Tabs.Tab title="直达" key="fruits">
            <List>
              {TickList?.map((item, ind) => (
                <div className="listitem" key={ind}>
                  <div className="listitem_left">
                    <span>{item.start}</span>
                    <span>{item.end}</span>
                    <span>{item.startTime}</span>
                    <span>
                      商务座 <b>有票</b>
                    </span>
                    <span>
                      一等座 <b>有票</b>
                    </span>
                    <span>
                      二等座 <b>有票</b>
                    </span>
                  </div>
                  <div className="listitem_right">￥{item.tick.vip}</div>
                </div>
              ))}
            </List>
          </Tabs.Tab>
          <Tabs.Tab title="机票" key="vegetables">
            机票
          </Tabs.Tab>
          <Tabs.Tab title="汽车票" key="animals">
            汽车票
          </Tabs.Tab>
        </Tabs>
      </div>

      <Popup
        visible={visible1}
        onMaskClick={() => {
          setVisible1(false);
        }}
        onClose={() => {
          setVisible1(false);
        }}
        
      >
        <CalendarPickerView onChange={(val)=>{
          setDate(dayjs(val).format("YYYY-MM-DD"))
          setVisible1(false)
        }}/>
      </Popup>
    </div>
  );
}

export default App;
